site_8g/src/app/[locale]/(ordinary)/profile/page.scss

.profile-box {
    padding: .44rem 0 .6rem;
    height: 100vh;
    overflow-y: auto;
    background-color: #1f1f1f;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .userContent {
      background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
      background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
      background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
      background: linear-gradient(180deg, #ffaa30, #ffe6be);
      height: auto;
    }

    .userInfo {
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      height: .56rem;
      padding: .11rem .18rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-bottom: .23rem;

      &.active {
        margin-bottom: 0;
      }

      & > div {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: .36rem;
        font-size: .14rem;
        color: #000;

        .bgImg {
          width: .36rem;
          height: .36rem;
          margin-right: .1rem;
          background-color: transparent;
          background: url('/img/logo.webp') no-repeat center;
          background-size: 100% 100%;

          &.default {
            background-size: 80% 80%;
          }
        }
        
        & > div {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          height: .36rem;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
        }
        .phone {
          font-size: .12rem;
        }
      }

      .goto {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .iconfont {
        font-size: .16rem;
        font-weight: 700;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        margin-left: .04rem;
      }
    }

    .coin {
      display: flex;
      justify-content: space-between;
      padding: .07rem 0 .3rem;
      margin: 0 .18rem;
      border-top: .01rem dotted #d9a801;

      & > div {
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 50%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:first-child {
          border-right: .01rem dotted #d9a801;
        }

        .iconfont {
          margin: 0 .08rem;
          font-size: .18rem;
          color: #000;

          &.icon-gift2 {
            width: .32rem;
          }
        }

        & > div {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        
        div {
          span {
            font-size: .12rem;
            color: #333;
            display: flex;
            align-items: center;

            .a {
              width: .14rem;
              margin-left: .03rem;
            }
          }
          .num {
            width: 100%;
            height: auto;
            display: flex;
            span {
              font-size: .14rem;
              &:first-child {
                margin-right: .04rem;
              }
            }
          }
        }
      }
    }
    .link {
      width: 100%;
      height: auto;
      margin-top: -.22rem;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 1.63rem;
        height: .44rem;
        line-height: .44rem;
        background: -o-linear-gradient(top, #ff9323, #ff6a01);
        background: linear-gradient(180deg, #ff9323, #ff6a01);
        border-radius: .04rem;
        color: #fff;
        font-size: .14rem;
        margin: 0 .08rem;
        text-align: center;
      }
    }

}